<template>
  <div>
    <crumb isShowBack/>
    <div class="main-contianer3 caseManage">
      <div class="top-content">
        <div class="main">
          <div class="main-left">
            <div class="case-tip">案例标题: {{cases.caseName}}</div>
            <div class="case-tip">案例要求</div>
            <div class="case-con">
              <span>{{cases.caseRequest || ''}}</span>
            </div>
            <div class="case-tip">答题题量：{{cases.historyListSize}}题</div>
            <div class="bottom-box">
              <div class="history-show-title">历史得分趋势</div>
              <!-- 历史记录的echarts图表 -->
              <div id="echartsDemo" style="clear:both"></div>
            </div>
          </div>
          <div class="main-right">
            <div class="history-show-title">训练报告</div>
            <div class="train-chartBox">
              <tj-circle :circelData="circelData"/>
            </div>
            <div class="history-show-title">历史训练记录（共{{cases.historyListSize}}次）</div>
            <table border="1" class="table">
              <tr>
                <td>时间</td>
                <td>得分</td>
                <td>时长</td>
              </tr>
              <tr v-for="(item, index) in cases.historyList" :key="index" class="cursor" @click="details(item.lessonTrainingId)">
                <td>{{item.createdTime}}</td>
                <td>{{item.score}}</td>
                <td>{{returnDate(item.duration)}}</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { history } from '@/api/student/training/caseAnalyse'
import tjCircle from './Circle'
let echarts = require('echarts')
export default {
  name: 'caseAnalyseHistory',
  data () {
    return {
      id: this.$route.query.id,
      batchId: '',
      cases: {
        caseName: '',
        caseRequest: '',
        duration: '',
        headImgUrl: '',
        historyList: [],
        historyListSize: '',
        isScored: '',
        rank: '',
        score: '',
        stuBatchId: '',
        userName: ''
      },
      circelData: [{
        name: '时长',
        text: '15’30',
        percentage: 0
      }, {
        name: '得分',
        text: '80',
        percentage: 0,
        status: 'success'
      }, {
        name: '排名',
        text: '17',
        percentage: 0,
        // status有三种形式
        // warning 黄色 success 绿色
        status: 'warning'
      }],
      // 图表数据
      option: {
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value',
          // 设置Y轴最大值
          max: 120
        },
        series: [
          {
            name: '今日课程学习时长',
            type: 'line',
            itemStyle: {
              normal: {
                color: '#009CF6',
                lineStyle: {
                  color: '#009CF6'
                }
              }
            },
            data: [],
            label: {
              show: true
            }
          }
        ]
      }
    }
  },
  mounted () {
    this.history()
  },
  methods: {
    echartsFun () { // 折线图
      let myChart = echarts.init(document.getElementById('echartsDemo'))
      myChart.setOption(this.option)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    },
    async history () {
      const res = await history({
        resourceCaseId: this.id
      })
      if (res.code === '200') {
        console.log(res.data)
        this.cases = res.data
        const data = res.data
        this.option.xAxis.data = data.historyList.map(el => {
          return el.createdTime
        })
        this.option.series[0].data = data.historyList.map(el => {
          return el.score
        })
        this.circelData[0].text = this.returnDate(data.duration)
        this.circelData[0].percentage = data.duration / (60 * 15) * 100
        this.circelData[1].text = Number(data.score)
        this.circelData[1].percentage = Number(data.score) / 100 * 100
        this.circelData[2].text = Number(data.rank)
        this.circelData[2].percentage = (100 - Number(data.rank)) / 100 * 100
        this.echartsFun()
      } else {
        this.$message.error(res.message)
      }
    },
    returnDate (time) {
      if (time < 60) {
        return time < 10 ? '00:0' + time : '00:' + time
      } else if (time < 3600) {
        return Math.floor(time / 60) < 10 ? '0' + Math.floor(time / 60) + ':' + (time % 60 < 10 ? '0' + time % 60 : time % 60) : Math.floor(time / 60) + ':' + (time % 60 < 10 ? '0' + time % 60 : time % 60)
      } else {
        return '大于一小时'
      }
    }
  },
  components: {
    tjCircle
  }
}
</script>
<style scoped lang="scss" rel="stylesheet/scss">
.caseManage {
  .top-content {
    width: 100%;
    background: #fff;
    .main {
      width: 1200px;
      margin: 0 auto;
      .main-left {
        width: 600px;
        height: 700px;
        float: left;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(229, 229, 229, 1);
        box-sizing: border-box;
        padding: 10px;
        border-radius: 5px;
        overflow: auto;
      }
      .main-right {
        width: calc(100% - 600px - 10px);
        height: 700px;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(229, 229, 229, 1);
        border-radius: 5px;
        float: right;
        padding: 10px;
        position: relative;
        overflow-y: scroll;
      }
    }
  }
  .history-show-title {
    padding: 16px 12px;
    font-size: 16px;
    color: #101d37;
    font-weight: bold;
  }
  #echartsDemo{
    width: 500px;
    height: 400px;
    margin: 0 auto;
  }
  .table {
    margin: 20px;
    border-collapse: collapse;
  }
  .table td {
    height: 52px;
    width: 222px;
    text-align: center;
    line-height: 52px;
    border: 1px solid #ccc;
  }
}
</style>
